<!-- subpkg_consult/description/index.vue -->
<script lang="ts" setup>
import { uploadImageApi } from "@/apis/upload"
import { consultFlags, illnessTimes } from "@/constants/patient"
import { useConsultStore } from "@/stores/consult"
import type { ConsultInfo } from "@/types/consult"
import { computed, ref, watch } from "vue"

const pageParams = defineProps<{
  type: string
  depId: string
  illnessType: string
}>()

const consultStore = useConsultStore()
// 图文问诊表单信息
const illnessInfo = ref<ConsultInfo>({ ...consultStore.defaultIllnessInfo })

watch(illnessInfo.value, () => {
  consultStore.illnessInfo = illnessInfo.value
})

// 如果有持久化病情信息，则弹窗提示是否恢复表单
if (
  consultStore.illnessInfo.illnessDesc ||
  consultStore.illnessInfo.pictures.length
) {
  // 弹窗
  uni.showModal({
    title: "温馨提示",
    content: "是否恢复之前填写的病情信息",
    confirmColor: "#16C2A3",
    success: (res) => {
      // 点击确定，把持久化的数据赋值给表单回显
      if (res.confirm) {
        illnessInfo.value = consultStore.illnessInfo
      }
      // 点击取消，重置 store 存储的数据
      if (res.cancel) {
        consultStore.illnessInfo = { ...consultStore.defaultIllnessInfo }
      }
    },
  })
}

// 上传图片时触发
const onSelect = async (event: UniHelper.UniFilePickerOnSelectEvent) => {
  event.tempFilePaths.forEach(async (item) => {
    try {
      const res = await uploadImageApi(item)
      illnessInfo.value.pictures.push(res)
    } catch (err) {
      console.log(err)
    }
  })
}

// 删除图片文化后触发
const onDelete = (event: UniHelper.UniFilePickerOnDeleteEvent) => {
  illnessInfo.value.pictures.splice(event.index, 1)
}

// 根据疾病信息中的图片数据计算得出图片列表
const iamgeList = computed(() => {
  return illnessInfo.value.pictures.map<UniHelper.UniFilePickerValue>(
    (item) => {
      return {
        url: item.url,
        name: item.id,
        extname: item.url.split(".").pop() || "jpg",
      }
    }
  )
})

// 图文问诊，点击下一步
const nextStep = () => {
  // 把页面参数也持久化到 store 中
  if (pageParams) {
    consultStore.type = pageParams.type
    consultStore.depId = pageParams.depId
    consultStore.illnessType = pageParams.illnessType
  }
  // 跳转到选择患者页，选择患者页可以【复用】之前的档案列表页，通过传递页面参数区别
  uni.navigateTo({ url: "/subpkg_archive/list/index?type=consult" })
}
</script>

<template>
  <scroll-view>
    <view class="description-page">
      <!-- 在线医生 -->
      <view class="doctor-online">
        <image
          src="/static/uploads/doctor-avatar-2.png"
          class="doctor-avatar"
        />
        <view class="doctor-info">
          <view class="name">在线医生</view>
          <view class="message">
            请描述你的疾病或症状、是否用药、就诊经历，需要我听过什么样的帮助
          </view>
          <view class="tips">
            <text class="iconfont icon-shield"></text>
            内容仅医生可见
          </view>
        </view>
      </view>
      <!-- 患者信息 -->
      <view class="patient-info">
        <view class="description">
          <uni-easyinput
            v-model="illnessInfo.illnessDesc"
            type="textarea"
            :input-border="false"
            placeholder-style="font-size: 30rpx; color: #979797"
            placeholder="请详细描述您的病情,病情描述不能为空"
          />
        </view>

        <view class="title">本次患病多久了？</view>
        <view class="tags">
          <text
            v-for="item in illnessTimes"
            :key="item.value"
            class="tag"
            :class="{ active: illnessInfo.illnessTime === item.type }"
            @click="illnessInfo.illnessTime = item.type"
          >
            {{ item.value }}
          </text>
        </view>

        <view class="title">此次病情是否去医院就诊过？</view>
        <view class="tags">
          <text
            v-for="item in consultFlags"
            :key="item.value"
            class="tag"
            :class="{ active: illnessInfo.consultFlag === item.type }"
            @click="illnessInfo.consultFlag = item.type"
          >
            {{ item.value }}
          </text>
        </view>
      </view>
      <!-- 上传图片 -->
      <view class="patient-picture">
        <!-- uni-file-picker 的 v-model 仅用来回显-->
        <!-- @select 绑定的事件 不要 调用() 取不到event -->
        <uni-file-picker
          :value="iamgeList"
          :auto-upload="false"
          @select="onSelect"
          @delete="onDelete"
          title="上传病情相关图片 (仅医生可见)"
          limit="8"
          :image-styles="{ width: '160rpx', height: '160rpx' }"
          file-extname="png,jpg,gif,webp"
        />
      </view>
    </view>

    <!-- 下一步操作 -->
    <view class="next-step">
      <button
        :disabled="illnessInfo.illnessDesc.trim() === ''"
        class="uni-button"
        @click="nextStep()"
      >
        下一步
      </button>
    </view>
  </scroll-view>
</template>

<style lang="scss">
@import "./index.scss";
</style>
